<template>
  <div class="piece" :class="{ black: isBlack, white: !isBlack, 'last-move': isLastMove }"></div>
</template>

<script setup>
defineProps({
  isBlack: Boolean,
  isLastMove: Boolean
})
</script>

<style scoped>
.piece {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
  transition: box-shadow 0.3s ease;
}
.black {
  background-color: #000;
}
.white {
  background-color: #fff;
  border: 1px solid #000;
}
.last-move {
  box-shadow: 0 0 10px 3px rgba(255, 0, 0, 0.7);
}
</style>